<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="content">
    <div class="content-center">
      <!-- 头部 -->
      <div class="main-title">
        简历库-全部
      </div>
      <!--筛选-->
      <div class="main-search">
      </div>
      <!--列表-->
      <div class="main-list">
        <div>
          name
        </div>
        <div style="margin-left:20px">
          <v-mInpit :placeStr='你在哪'></v-mInpit>
        </div>
      </div>
      <div :class="{showdel:isShowdel}" class="delPopup">
        <transition name="slide-fade">
          <div class="delContent">
            <v-mIntercept @ok="confirmClick" @canle="cancelClick" :name="titlename"></v-mIntercept>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapActions } from "vuex";
  import mIntercept from "../module/mIntercept";
  export default {
    components: {
      "v-mIntercept": mIntercept
    },
    data() {
      return {
        isShowdel: true,
        intercept: false,
        toPath: '',
        titlename: "劳动成果还未保存，是否退出？",
      };
    },
    //跳转拦截
    beforeRouteLeave(to, from, next) {
      this.toPath = to.path;
      if (this.intercept == false) {
        this.isShowdel = false;
      } else if (this.intercept == true) {
        this.isShowdel = true;
        next();
      }
    },
    // 过滤
    filters: {
      timeFun: function (val) {
        var now = new Date(val);
        var year = now.getYear() - 100;
        var month = now.getMonth() + 1;
        month = month > 9 ? month : "0 " + month;
        var date = now.getDate();
        date = date > 9 ? date : "0 " + date;
        var hour = now.getHours();
        hour = hour > 9 ? hour : "0 " + hour;
        var minute = now.getMinutes();
        minute = minute > 9 ? minute : "0 " + minute;
        return (
          "20 " + year + "- " + month + "- " + date + " " + hour + ": " + minute
        );
      }
    },
    // 模块新建时
    created: function () {
      var self = this;
    },
    // 计算属性
    mounted() { },
    // 事件处理
    methods: {
      // 获取列表
      listFun() {
        var self = this;
        self
          .getstoreclassAttributefindPage({})
          .then(data => {
            if (data.code == 200) {
            } else {
            }
          })
          .catch(msg => { });
      },
      confirmClick() {
        this.intercept = true;
        var url = this.toPath;
        this.$router.push({
          path: url
        });
      },
      //取消未保存弹出框
      cancelClick() {
        this.isShowdel = true;
      },
      ...mapActions(["getstoreclassAttributefindPage"])
    },
    // 监视
    watch: {}
  };
</script>
<style scoped>
  .main-title {
    width: 100%;
    height: 50px;
    border: 1px solid red;
  }

  .main-search {
    width: 100%;
    margin-top: 20px;
    min-height: 50px;
    border: 1px solid red;
  }

  .main-list {
    width: 100%;
    margin-top: 20px;
    min-height: 350px;
    border: 1px solid red;
  }

  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .content-center {
    overflow: hidden;
    width: calc(100% - 20px);
    margin-left: 10px;
  }

  /*取消弹出框*/

  .delPopup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1000000;
  }

  .showdel {
    display: none;
  }

  .delContent {
    width: 525px;
    height: 280px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0px 10px 10px #eaeaea;
    border-radius: 7px;
    margin: calc((100vh - 280px) / 2) auto;
    z-index: 100000;
  }

  .slide-fade-enter-active {
    transition: all 0.7s ease;
  }

  .slide-fade-enter,
  .slide-fade-leave-active {
    transform: translateY(-30px);
    opacity: 0;
  }
</style>